<template>
  <Block title="其他信息">
    <template v-if="isEditing" #extra>
      <el-button size="mini" :loading="$attrs.isSubmitting" @click="$emit('save')">保存</el-button>
    </template>
    <div v-if="fieldConfig.length > 0" class="company-archives-container">
      <table class="company-archives">
        <tbody>
          <tr
            v-for="(item, index) in convertTo2DArray(fieldConfig)"
            :key="index"
          >
            <template
              v-for="child in item"
            >

              <td :key="`${child.name}_${child.field}_${child.id}`" class="label"> {{ child.name }} </td>
              <td :key="`${child.id}_${child.field}_${child.name}`" class="value">
                <ValueWithInput
                  v-if="child.type === 'string'"
                  v-model="profile[child.field]"
                  :is-editing="isEditing"
                  size="mini"
                />
                <ValueWithDateInput
                  v-if="child.type === 'date'"
                  v-model="profile[child.field]"
                  :is-editing="isEditing"
                  size="mini"
                />
                <ValueWithUpload
                  v-if="child.type === 'file'"
                  :is-editing="isEditing"
                  :download-address="profile[child.field]"
                  :upload-field="child.field"
                  @onConfirm="onConfirm"
                />
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else class="empty">
      <el-empty
        :image-size="60"
        description="暂无其他信息..."
      />
    </div>
  </Block>
</template>
<script>
import Block from '../Block/index.vue'
import ValueWithInput from '../ValueWithInput/WithInput.vue'
import ValueWithDateInput from '../ValueWithInput/WithDate.vue'
import ValueWithUpload from '../ValueWithInput/withUpload.vue'
export default {
  name: '',
  components: {
    Block,
    ValueWithInput,
    ValueWithUpload,
    ValueWithDateInput
  },
  props: {
    isEditing: {
      type: Boolean,
      required: true,
      default: false
    },
    profile: {
      type: Object,
      required: true,
      default() {
        return null
      }
    },
    fieldConfig: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      a: ''
    }
  },
  methods: {
    convertTo2DArray(source) {
      if (!Array.isArray(source)) return []
      const newArray = []
      for (let i = 0; i < source.length; i += 3) {
        const childArr = source.slice(i, i + 3)
        newArray.push(childArr)
      }
      return newArray
    },
    onConfirm(e) {
      const { field, result } = e
      const data = {
        field,
        value: result.data.path
      }
      this.$emit('uploadSuccess', data)
    }
  }
}
</script>
<style lang="scss">
.company-archives-container {
  .company-archives {
    width: 100%;
  }
}
.empty {
  background-color: #f5f5f5;
}
</style>
